﻿var Display = {
    restriction: {
        diagonal: 50,
        width: 5000,
        height: 5000
    },
    data: null,
    resize: 9,
    apply: function(){
        var $displayBlock = $(".display-block");
        for(var i=0; i<$displayBlock.length; i++) {
            var d = $($displayBlock[i]).find('.display-diagonal').val();
            var w = $($displayBlock[i]).find('.display-width').val();
            var h = $($displayBlock[i]).find('.display-height').val();
            var calc = this.calc(d, w, h);

            if(isNaN(calc[1]) || isNaN(calc[2])) {
                calc[1] = 0;
                calc[2] = 0;
            }

            $($displayBlock[i]).find(".display-width").parent().parent().find("td:nth-child(4)").html(calc[1].toFixed(1));
            $($displayBlock[i]).find(".display-height").parent().parent().find("td:nth-child(4)").html(calc[2].toFixed(1));

            var widthResize = calc[1] * this.resize;
            var heightResize = calc[2] * this.resize;

            var display = $($displayBlock[i]).find(".display");
            display.css("width", widthResize);
            display.css("height", heightResize);

            var $img = $($displayBlock[i]).find("img");
            if(calc[1] == 0 || calc[2] == 0) {
                $img.css("display", "none")
            } else {
                $img.css('display', 'block');
                $img.css('width', (widthResize / w * 250) + 'px');
                $img.css('height', (heightResize / h * 250) + 'px');
            }
        }
    },
    calc: function(diagonal, width, height) {
        diagonal = parseFloat(diagonal);
        width = parseFloat(width);
        height = parseFloat(height);

        if(isNaN(diagonal) || isNaN(width) || isNaN(height))
            return [0, 0];

        if(diagonal > this.restriction.diagonal) diagonal = this.restriction.diagonal;
        if(width > this.restriction.width) width = this.restriction.width;
        if(height > this.restriction.height) height = this.restriction.height;

        var rel = width / height;
        var inchHeight = diagonal / Math.sqrt(rel*rel + 1);
        var inchWidth = inchHeight * rel;

        const inchSm = 2.54;
        var smDiagonal = diagonal * inchSm;
        var smWidth = inchWidth * inchSm;
        var smHeight = inchHeight * inchSm;

        return [smDiagonal, smWidth, smHeight];
    },
    fill: function(el, diagonal, width, height){
        var parent = $(el).parent().parent();
        parent.find(".display-diagonal").val(diagonal);
        parent.find(".display-width").val(width);
        parent.find(".display-height").val(height);
        this.apply();
    },
    buttons: function(){
        if(this.data) {
            for(var i=0; i<this.data.length; i++) {
                var button = document.createElement("button");
                button.innerHTML = this.data[i].name;
                button.setAttribute("onclick", "Display.fill(this, " + this.data[i].diagonal + ", " + this.data[i].width + ", " + this.data[i].height + ");");
                $('.display-select').append(button);
            }
        }
    }
};

$(document).ready(function(){
    Display.buttons();
});